<template>
  <u-popup :show="value" @close="close" mode="center" round="10">
    <view class="body">
      <view class="info">
        <view class="avatar">
          <image :src="info.avatar" mode="scaleToFill" />
        </view>
        <view class="right">
          <view class="nickname ">
            {{ info.nickname }}
            <image
              v-if="info.sex == 1"
              src="https://oss.xhoven.com/6eda89b30f4678c94c88551a46ef15bd.png"
              class="gender"
              mode="scaleToFill"
            />
            <image
              v-if="info.sex == 2"
              src="https://oss.xhoven.com/468e0e75081370c61fa6e5d20bd507b2.png"
              class="gender"
              mode="scaleToFill"
            />
          </view>
          <view class="infoBox">
            <view class="phone">{{ info.encryMobile }}</view>
            <view class="name">({{ info.nickname[0] }}先生)</view>
            <view class="identity" v-if="info.app_type && info.app_type == 3"
              >(抖音小程序)</view
            >
            <view class="identity" v-if="info.app_type && info.app_type == 2"
              >(微信小程序)</view
            >
          </view>
        </view>
      </view>
      <view class="btnlist">
        <view class="input" @click="clickEvent(1)">
          <u--input
            border="surround"
            :customStyle="{
              height: '100%',
              borderColor: '#7b7b7b !important'
            }"
            readonly
            @blur="blurEvent"
          ></u--input>
          <view class="label">
            {{ labelA }}
            <image
              v-if="showA"
              src="https://oss.xhoven.com/292491b508ff94cd4779ffb3d65038cd.png"
              mode="scaleToFill"
            />
            <image
              v-else
              src="https://oss.xhoven.com/71a61647797baf0be6bfbba5c5bc5754.png"
              mode="scaleToFill"
            />
          </view>
          <view class="dropdown" v-if="showA">
            <view
              :class="['dropdown-item', v.label == labelA ? 'active' : '']"
              v-for="(v, i) in optionsA"
              :key="i"
              @click="changeStatus(v, 1)"
            >
              {{ v.label }}
            </view>
          </view>
        </view>
        <view class="input" @click="clickEvent(2)">
          <u--input
            border="surround"
            :customStyle="{
              height: '100%',
              borderColor: '#7b7b7b !important'
            }"
            readonly
          ></u--input>
          <view class="label">
            {{ labelB }}
            <image
              v-if="showB"
              src="https://oss.xhoven.com/292491b508ff94cd4779ffb3d65038cd.png"
              mode="scaleToFill"
            />
            <image
              v-else
              src="https://oss.xhoven.com/71a61647797baf0be6bfbba5c5bc5754.png"
              mode="scaleToFill"
            />
          </view>
          <view class="dropdown" v-if="showB && true">
            <view
              :class="['dropdown-item', v.label == labelB ? 'active' : '']"
              v-for="(v, i) in optionsB"
              :key="i"
              @click="changeStatus(v, 2)"
            >
              {{ v.label }}
            </view>
          </view>
        </view>
      </view>
      <view class="coupon">
        <view class="title">领券情况</view>
        <view class="box">
          <view
            :class="[
              'coupon-item',
              v.coupon.use_condition_type == 1 ? 'xj' : '',
              v.coupon.use_condition_type == 2 ? 'mj' : '',
              v.coupon.use_condition_type == 3 ? 'zk' : '',
              v.coupon.use_condition_type == 4 ? 'zk' : ''
            ]"
            v-for="(v, i) in couponList"
            :key="i"
          >
            <view class="left">{{
              v.coupon.use_condition_type | formatType
            }}</view>
            <view class="right">
              <view class="title">{{ v | formatTitle }}</view>
              <view class="time">有效期: {{ v.time }}</view>
            </view>
          </view>
          <view class="noneData" v-if="!couponList.length"
            ><image
              src="https://oss.xhoven.com/905f3e5fcdcb46aa09376edb8c71fb47.png"
              mode="scaleToFill"
          /></view>
          <!-- <view class="coupon-item zk">
            <view class="left">折扣</view>
            <view class="right">
              <view class="title">8.0折</view>
              <view class="time">有效期: 2022.06.02-2022.07.01</view>
            </view>
          </view>
          <view class="coupon-item xj">
            <view class="left">现金券</view>
            <view class="right">
              <view class="title">￥8988元</view>
              <view class="time">有效期: 2022.06.02-2022.07.01</view>
            </view>
          </view> -->
        </view>
      </view>
      <view class="call">
        <view class="call-item" @click="callPhone">
          <image
            src="https://oss.xhoven.com/286b18c41ea4e44272a34468d4006364.png"
            mode="scaleToFill"
          />
          一键拨号
        </view>
      </view>
    </view>
    <view class="close" @click="close">
      <view class="pic"
        ><image
          src="https://oss.xhoven.com/1f2b47ae650aac7bfd99898693a7d149.png"
          mode="scaleToFill"
      /></view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      labelA: '未跟进',
      labelB: '未分配',
      optionsA: [
        { label: '未跟进', value: '2' },
        { label: '已跟进', value: '3' }
      ],
      optionsB: [],
      showA: false,
      showB: false,
      info: {},
      couponList: [],
      id: ''
    }
  },
  filters: {
    formatType (v) {
      switch (v) {
        case 1:
          return '现金券'
        case 2:
          return '满减'
        case 3:
          return '礼品'
        case 4:
          return '抽奖'
        default:
          break
      }
    },
    formatTitle (v) {
      switch (v.coupon.use_condition_type) {
        case 1:
          return `￥${v.coupon.preferential_money}元`
        case 2:
          return `满 ${v.coupon.full_reduction} 减 ${v.coupon.preferential_money}`
        case 3:
          return v.coupon.name
        case 4:
          return v.coupon.name
        default:
          break
      }
    }
  },
  methods: {
    close () {
      this.showA = false
      this.showB = false
      this.$emit('input', false)
      this.$emit('done')
    },
    clickEvent (v) {
      if (v == 1 && !this.showA) {
        this.showA = true
        this.showB = false
      } else if (v == 2 && !this.showB) {
        this.showB = true
        this.showA = false
      } else if (v == 1 && this.showA) {
        this.showA = false
      } else if (v == 2 && this.showB) {
        this.showB = false
      }
    },
    async changeStatus (item, v) {
      if (item.value == 'noData') {
        return
      }
      if (v == 1) {
        try {
          await this.$api.client.changeStatus({
            status: item.value,
            id: this.id
          })
          this.labelA = item.label
        } catch (error) {
          uni.$u.toast(error.msg)
        }
      } else if (v == 2) {
        if (uni.getStorageSync('id') == 6) {
          try {
            await this.$api.client.clientAllotShop({
              business_shop_id: item.value,
              id: this.id
            })
            this.labelB = item.label
          } catch (error) {
            uni.$u.toast(error.msg)
          }
        } else {
          try {
            await this.$api.client.clientAllot({
              admin_id: item.value,
              id: this.id
            })
            this.labelB = item.label
          } catch (error) {
            uni.$u.toast(error.msg)
          }
        }
      }
    },
    async setinfo (v) {
      this.labelA = v.status == 3 ? '已跟进' : '未跟进'
      this.labelB = v.admin || '未分配'
      this.id = v.id
      this.info = v.members
      this.info.mobile = this.info.mobile + ''
      this.info.encryMobile = `${this.info.mobile.substring(
        0,
        3
      )}****${this.info.mobile.substring(8)}`
      const res = await this.$api.client.coupon({ member_id: v.members.id })
      this.couponList = res.data
      this.couponList.forEach(v => {
        v.time =
          v.coupon.coupon_start_time.split(' ')[0].replaceAll('-', '.') +
          '-' +
          v.coupon.coupon_end_time.split(' ')[0].replaceAll('-', '.')
      })
      if (uni.getStorageSync('id') == 6) {
        const res = await this.$api.client.shopList()
        this.optionsB = res.data.data.map(v => {
          return {
            label: v.name,
            value: v.id
          }
        })
        if (!this.optionsB.length) {
          this.optionsB = [{ label: '暂无门店', value: 'noData' }]
        }
      } else {
        const res1 = await this.$api.my.roleList()
        res1.data = res1.data.filter(v => v.status)
        this.optionsB = res1.data.map(v => {
          return {
            label: v.nickname,
            value: v.id
          }
        })
        if (!this.optionsB.length) {
          this.optionsB = [{ label: '暂无导购', value: 'noData' }]
        }
      }
    },
    callPhone () {
      uni.makePhoneCall({
        phoneNumber: this.info.mobile,
        success: v => {
          console.log(v)
        },
        fail: v => {
          console.log(v)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  width: 620rpx;
  //   min-height: 400rpx;
  // min-height: 997rpx;
  max-height: 997rpx;
  background-image: url('https://oss.xhoven.com/516c99173ae47a060ad18a82ae95b1a4.png');
  background-size: 100% 100%;
  overflow: hidden;
  border-radius: 20rpx;
  padding: 40rpx;
  .info {
    height: 100rpx;
    width: 100%;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100rpx;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .nickname {
        font-size: 30rpx;
        font-weight: 600;
        position: relative;
        margin-bottom: 10rpx;
        .gender {
          margin-left: 10rpx;
          width: 26rpx !important;
          height: 26rpx !important;
        }
      }
      .infoBox {
        display: flex;
        .phone {
          font-size: 25rpx;
          margin-right: 10rpx;
        }
        .name {
          font-size: 25rpx;
          margin-right: 20rpx;
        }
        .identity {
          font-size: 23rpx;
        }
      }
    }
  }
  .btnlist {
    display: flex;
    justify-content: center;
    margin-bottom: 80rpx;
    .input {
      width: 260rpx;
      height: 62rpx;
      margin-right: 20rpx;
      position: relative;
      &:last-child {
        margin-right: 0;
      }
      .label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 25rpx;
        font-weight: 600;
        letter-spacing: 2rpx;
        white-space: nowrap;
        overflow: hidden;
        letter-spacing: 2rpx;
        text-overflow: ellipsis;
        max-width: 220rpx;
        image {
          position: absolute;
          top: 10rpx;
          right: -20rpx;
          width: 16rpx !important;
          height: 16rpx !important;
        }
      }
      .dropdown {
        position: absolute;
        top: 62rpx;
        left: 0rpx;
        border-radius: 0 0 10rpx 10rpx;
        border: 1px solid #7b7b7b;
        z-index: 99;
        background-color: #fff;
        overflow-y: scroll;
        max-height: 410rpx;
        .dropdown-item {
          height: 83rpx;
          width: 255rpx;
          font-size: 23rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #f2f2f2;
        }
        .active {
          color: #3473fe;
        }
      }
    }
  }
  .coupon {
    .title {
      font-size: 30rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
    }
    .box {
      max-height: 440rpx;
      overflow-y: scroll;
      .coupon-item {
        width: 100%;
        height: 132rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .left {
          width: 120rpx;
          width: 155rpx;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 34rpx;
          font-weight: 600;
        }
        .right {
          margin-left: 37rpx;
          .title {
            width: 300rpx;
            white-space: nowrap;
            overflow: hidden;
            letter-spacing: 2rpx;
            text-overflow: ellipsis;
            font-size: 28rpx;
            font-weight: 600;
            margin-bottom: 14rpx;
          }
          .time {
            font-size: 17rpx;
            color: #666;
          }
        }
      }
      .noneData {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 400rpx;
        height: 400rpx;
        overflow: hidden;
        margin: auto;
        position: relative;
        &::after {
          content: '这里什么也没有~';
          position: absolute;
          bottom: -50rpx;
          left: 50%;
          transform: translateX(-50%);
          font-size: 25rpx;
          font-weight: 600;
        }
      }

      .mj {
        background-image: url('https://oss.xhoven.com/08844b9dcddbf193c55d942c97b9acd7.png');
        background-size: 100% 100%;
      }

      .zk {
        color: #fff;
        .time {
          color: #fff !important;
        }
        background-image: url('https://oss.xhoven.com/c152bce6aa8e6624f4bb48e0484d45ff.png');
        background-size: 100% 100%;
      }

      .xj {
        color: #f86e3d;
        .time {
          color: #f86e3d !important;
        }
        background-image: url('https://oss.xhoven.com/0cc90e09a8125a6278160e9d5a2f8833.png');
        background-size: 100% 100%;
      }
    }
  }
  .call {
    width: 100%;
    display: flex;
    justify-content: center;
    .call-item {
      margin-top: 60rpx;
      width: 500rpx;
      height: 88rpx;
      border-radius: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 2rpx;
      background-color: #3d73fe;
      color: #fff;
      image {
        width: 26rpx !important;
        height: 26rpx !important;
      }
    }
  }
}
.close {
  position: relative;
  width: 100%;
  .pic {
    position: absolute;
    width: 54rpx;
    height: 54rpx;
    top: 100rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
